<template>
	<div>
		<div class="my-body_center_left" style="margin-top: 10px; ">
			<div style="margin-left: 10px;">联系人列表</div>
			<div style="margin-top: 30px;">
				<template>
					<el-table :data="tableDataa.slice((currentPage-1)*pageSize,currentPage*pageSize)"
						style="width: 100%;"  border :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column fixed prop="bianhao" label="用户id" >
						</el-table-column>
						<el-table-column prop="senddate" label="用户名称" >
						</el-table-column>

					</el-table>
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
								:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
							</el-pagination>
				</template>
				
			</div>
		</div>
		<div class="my-body_right" style="margin-top: 10px; ">
			<div style="margin-left: 10px;" >留言类型</div>
			<div class="app-container">
				<div class="ipt_a">
					<div style="float: left; line-height: 30px; "  class="tab_font-size">留言方对象：</div>
					<el-input v-model="input" placeholder="请输入内容"
						style=" width: 150px;height: 50px; float: left;"></el-input>
				</div>

				<div>
					<el-button type="primary" plain>查询</el-button>
					
					<el-button type="primary" @click="tianjialist = true" plain> 添加</el-button>
					<el-button plain>删除</el-button>
					<el-dialog title="留言板" :visible.sync="tianjialist" width="30%" :before-close="handleClose">
						<div style="width: 100%; height:500px;">
							<div style="width: 100%; float: left; height: 50px;">
								<div style="float: left;">发送</div><div style="margin-left: 20px; float: left;" @click="shangchuan = true">附件</div>
							</div>
							
							<div>
								
								<div class="ipt_b">
									<div style="float: left; line-height: 30px;">收件人：</div>
									<el-input v-model="input" style=" width: 300px;height: 50px; float: left;"></el-input>
					                <el-button type="primary">...</el-button>
					
								</div>
					
								<div class="ipt_b" style="float: left;">
									<div style="float: left; line-height: 30px;">主题：</div>
									<el-input v-model="input" style=" width: 300px;height: 50px; float: left;"></el-input>
					
								</div>
							</div>
					       <div>
					       	<template>
					       		<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
					       			style="width: 100%; height: 200px;">
					       			
					       			<el-table-column fixed prop="bianhao" label="附件名称">
					       			</el-table-column>
					       			<el-table-column prop="senddate" label="附件类型">
					       			</el-table-column>
					       			
					       	
					       		</el-table>
					       		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					       			:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
					       			:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
					       		</el-pagination>
					       	</template>
					       
					       
					       
					       </div>
					
							<div class="ipt_a">
								<el-button>返回</el-button>
								<el-button type="primary">提交</el-button>
							</div>
						</div>
					</el-dialog>
                      <el-dialog title="添加产品规格" :visible.sync="shangchuan" width="30%" :before-close="handleClose">
                      	<div style="width: 100%; height: 200px;">
                      		<div>
                      			
                      			<div class="ipt_b">
                      				<div style="float: left; line-height: 30px;">文件路径：</div>
                      				<el-input v-model="input" style=" width: 300px;height: 50px; float: left;"></el-input>
                                      <el-button type="primary">...</el-button>
                      
                      			</div>
                      
                      			<div class="ipt_b" style="float: left;">
                      				<div style="float: left; line-height: 30px;">文件名称：</div>
                      				<el-input v-model="input" style=" width: 300px;height: 50px; float: left;"></el-input>
                      
                      			</div>
                      		</div>
                             <div>
                             	
                             	<div class="ipt_b">
                             		<div style="float: left; line-height: 30px;">文件类型：</div>
                             		<el-input v-model="input" style=" width: 300px;height: 50px; float: left;"></el-input>
                             
                             
                             	</div>
                             
                             
                             </div>
                      
                      		<div class="ipt_a">
                      			<el-button>返回</el-button>
                      			<el-button type="primary">提交</el-button>
                      		</div>
                      	</div>
                      </el-dialog>
					<div style="margin-top: 30px;">
						<template>
							<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
								style="width: 100%;"  border :header-cell-style="{background:'#f5f7fa',color:'#606266'}">
								<el-table-column type="selection" width="55">
								</el-table-column>
								<el-table-column fixed prop="bianhao" label="留言方">
								</el-table-column>
								<el-table-column prop="senddate" label="留言对象">
								</el-table-column>
								<el-table-column prop="enddate" label="留言主题">
								</el-table-column>
								<el-table-column prop="name" label="留言事件源" >
								</el-table-column>
								<el-table-column prop="province" label="留言事件" >
								</el-table-column>
								<el-table-column prop="address" label="留言时间" >
								</el-table-column>
								

							</el-table>
							<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
								:current-page="currentPage" :page-sizes="[5, 10]" :page-size="pageSize"
								:total="tableData.length" layout="total, sizes, prev, pager, next, jumper">
							</el-pagination>
						</template>
					</div>

				</div>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'ArticleList',

		data() {
			return {
				key: 1, // 为了能每次切换权限的时候重新初始化指令
				options: [{
					value: '1',
					label: '全部'
				}, {
					value: '2',
					label: '已签收'
				}, {
					value: '3',
					label: '未签收'
				}],
				data: [{
					label: '中国大陆',
					children: [{
							label: '上海',
						}, {
							label: '北京',
						},
						{
							label: '四川',
						}
					]
				}],
				value1: '',
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				value: '',
				shangchuan:false,
				tianjialist:false,
				chanpingguige: false,
				dialogVisible: false,
				dialogVisiblea: false,
				hospital: false,
				area: false,
				currentPage: 1,
				pageSize: 5,
				jinxiaoshang: false,
				shouhuor: false,
				diquxuanzhe: false,
				tableData: [{
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}, {
					bianhao: 'PS074107742412L',
					senddate: '2024-05-02',
					enddate: '2024-12-31',
					name: '左心耳',
					province: '完成授权',
					city: '普陀区',
					address: '苏州市中心医院',
					shouqfang: '鹰潭市方园医药有限公司',
					jingxiaos: '鹰潭市方园医药有限公司',
					peisonf: '鹰潭市方园医药有限公司',
					shouqyy: '入院',
					shangcaizhibiao: 3
				}],
				tableDataa: [{
					bianhao: 'B0201',
					senddate: '市场销售部',
					
				}, {
					bianhao: 'B0202',
					senddate: '商务部',
					
				},{
					bianhao: 'B0402',
					senddate: '物流仓储部',
					
				},{
					bianhao: 'B0404',
					senddate: '财务部',
					
				},{
					bianhao: 'B0401',
					senddate: '行政部',
					
				},],
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				sizeForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				}
			}
		},
		created() {

		},
		methods: {
			onSubmit() {
				console.log('submit!');
			},
			handleClose(done) {
				done();
				// this.$confirm('确认关闭？')
				// 	.then(_ => {
				// 		done();
				// 	})
				// 	.catch(_ => {});
			},

			handleClick(row) {
				console.log(row);
			},
			handleSizeChange(val) {
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
			}
		}
	}
</script>

<style scoped>
	.left_lie {
		width: 20%;
		float: left;
		margin-top:30px;
	}

	.right_lie {
		width: 80%;
		float: left;
		margin-top:30px;
	}

	.ipt_a {
		width: 300px;
		height: 50px;
		float: left;
	}

	.ipt_b {
		width: 450px;
		height: 50px;
		float: left;
	}

	.listdizhi {
		width: 100%;
		height: 100px;
		float: left;
		border-bottom: 1px solid;
	}

	.lie {
		width: 90%;
		height: 100%;
		float: left;

	}

	.listdizhia {
		width: 100%;
		height: 50px;
		float: left;
	}

	.listdizhia div {
		float: left;
		margin-left: 30px;
	}
	.el-table{
		height: calc(100vh - 282px);
}
</style>